
$(function(){
	var oDiv   =  $('#div1'),
	    oMark  =  $('.mark'),
	    oFloat =  $('.float_layer'),
	    oSmall =  $('.small_pic'),
	    oBig   =  $('.big_pic'), 
	    oImg   =  $('.big_pic img');
	oMark.mouseover(function(){
		oFloat.css({'display':'block'});
		oBig.css({'display':'block'});
		
	}).mouseout(function(){
		oFloat.css({'display':'none'});
		oBig.css({'display':'none'});
		
	}).mousemove(function(e){
	 	var evt = e || event,
	 		l   = evt.clientX - oDiv.offset().left - oSmall.offset().left - oFloat.width()/2, 		
	 		t   = evt.clientY - oDiv.offset().top - oSmall.offset().top- oFloat.height()/2;
	 		//console.log(l,t)
	 		if(l<0){			
			l = 0;
		}
		else if(l>oSmall.width() - oFloat.width()){			
			l = oSmall.width() - oFloat.width();			
		}
		if(t<0){
			
			t = 0;
		}
		else if(t>oSmall.height()-oFloat.height()){
			
			t = oSmall.height()-oFloat.height();			
		}	 	
	 	oFloat.css({'left':l,'top':t})	 	
		
		var percentX = l / (oMark.width() - oFloat.width()),
		    percentY = t / (oMark.height() - oFloat.height());
		
		oImg.css({
			'left':-percentX*(oImg.width()-oBig.width()),
			'top': -percentY*(oImg.height()-oBig.height())
			})
	 	
	 	
	 	
	 })
		
	    
	    
	    
})